<template>
    <div>
      <div style="
          width: 100%;
          display: flex;
          justify-content: space-between;
          border-bottom: 1px #eee solid;
          margin-bottom: 20px;
        ">
        <span style="font-size: 18px; color: #409eff; margin: 10px 0">进件信息</span>
        <div>
            <el-button type="primary" @click="incomingPartsDialogClick">进件</el-button>
        </div>
      </div>
        <el-table :data="importarray" border>
            <el-table-column align="center" prop="paymentPluginName" label="支付插件名称" width="180">
            </el-table-column>

            <el-table-column align="center" prop="appId" label="appId" width="180">
            </el-table-column>
            <el-table-column align="center" prop="appSecret" label="app秘钥" width="180">
            </el-table-column>

            <el-table-column align="center" prop="status" label="进件状态" width="150">
                <template slot-scope="scope">
                    <el-tag :type="scope.row.status==3?'danger':'success'">{{ scope.row.status | watchSubType }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="cerateDated" label="审核日期" width="180">
                <template slot-scope="scope">
                    <span>{{ scope.row.createDate | datetimeFormatter }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="remark" align="center" label="审核备注">
            </el-table-column>
            <el-table-column align="center" label="操作" width="180">
                <template slot-scope="scope">
                  <el-button type="primary" size="mini" @click="againIncomingParts(scope.row.paymentPluginId)"   v-if="scope.row.status != 2 ">重新进件</el-button>
                  <el-button type="primary" size="mini" v-if=" scope.row.status==2 && scope.row.signUrl != null && scope.row.signUrl != ''"   @click="codeshowfunction(scope.row.signUrl)">显示签约链接二维码</el-button>
                  <el-button type="primary" size="mini" v-if=" scope.row.status !=2 " @click="incomingQuery(scope.row.paymentPluginId)">查询</el-button>
                  <el-tooltip v-if="scope.row.status==2" class="item" effect="dark" :content="scope.row.Enabled?'禁用':'启用'" placement="top-start">
                    <a style="margin-left: 10px"  @click="openOrCloseClick(scope.row)">
                      <i style="color: #F56C6C" :class="[scope.row.status == 2 ? 'el-icon-open':'el-icon-turn-off']"></i>
                    </a>
                  </el-tooltip>
                </template>
            </el-table-column>
        </el-table>
      <el-dialog title="签约二维码" :visible.sync="codeShow" top="5vh" width="50%" :before-close="handleClose">
            <div style="width:100%;display: flex;justify-content: center;align-items: center;">
                <img :src="QRcode" alt="">
            </div>
            <span slot="footer" class="dialog-footer">
                <el-alert
                  :closable="false"
                  title="步骤：手机保存睿商营业执照和法人身份证到手机相册——扫以下二维码——选择企业——填写资料（营业执照，法人身份证）——身份验证，选择让法人扫码或者发微信验证给法人或者公司打款给微信——注册成功后——在扫以下这个二维码——勾选这个商户号488599269——点同意授权——完成"
                  type="info">
               </el-alert>
              <el-link style="margin-top: 20px" type="primary" @click="CopyCode">复制提示信息</el-link>
            </span>
        </el-dialog>
      <el-dialog title="请选择进件类型" :visible.sync="inComingPartsVisible" width="650px"  append-to-body>
        <div>
          <div style="display: flex; flex-direction: column;">
              <el-select v-model="paymentPluginId" clearable placeholder="请选择进件类型">
                <el-option label="微信" value="weixinPayPlugin"></el-option>
                <el-option label="易联众" value="ylzPayPlugin"></el-option>
                <el-option label="瑞银信" value="ryxPayPlugin"></el-option>
              </el-select>
          </div>
          <div style="display: flex;justify-content: flex-end;margin-top: 20px">
            <el-button type="primary" @click="incomingParts">确 定</el-button>
          </div>
        </div>
      </el-dialog>
    </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { createImage } from "@/api/zxing";
import { list } from "@/api/enterpriseImport";
import { merchantImport , selectApply } from "@/api/merchantPurchase";
import { updateEnabled } from "@/api/enterpriseImport";



updateEnabled
export default {
  data() {
      return {
          importform: {},
          importarray: [],
          statustype: null,
          codeShow: false,
          signUrl: "",
          inComingPartsVisible:false,
          paymentPluginId:'weixinPayPlugin',
          QRcode:''
      };
  },
  filters: {
      watchSubType(val) {
          if (val == 0) {
              return "待提交";
          } else if (val == 1) {
              return "已提交";
          } else if (val == 2) {
              return "已审核";
          } else if (val == 3) {
              return "已驳回";
          }
      },
  },
  computed: {
    ...mapGetters([
      'mchId'
    ])
  },
  props: {
  shopgetinfo: {
    type: Object,
  },
},
  watch: {
  shopgetinfo: {
    handler(val, old) {
      this.shopgetinfo = val
      this.wxSelectApply();
    },
    immediate: true,
    deep: true,
  },
  MuchShow: {
    handler(val, old) {
      this.MuchShow = val
    },
    immediate: true,
    deep: true,
  },
},
  created() {
  },
  methods: {
    openOrCloseClick(row){
        var _this = this
        this.$confirm(row.Enabled?'是否启用？':'是否启用?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let params = {
            id:row.id
          }
          updateEnabled(params).then(res => {
            if (res.type == 'success') {
              row.Enabled = !row.Enabled
              this.$message({
                type: 'success',
                message: row.Enabled?'启用成功!':'启用成功!',
                offset: 120,
                center: true
              })
            }
          })
        })
    },
    CopyCode () {
      let oInput = document.createElement('input');
      oInput.value = '步骤：手机保存睿商营业执照和法人身份证到手机相册——扫以下二维码——选择企业——填写资料（营业执照，法人身份证）——身份验证，选择让法人扫码或者发微信验证给法人或者公司打款给微信——注册成功后——在扫以下这个二维码——勾选这个商户号488599269——点同意授权——完成';
      document.body.appendChild(oInput);
      oInput.select(); // 选择对象;
      document.execCommand("Copy"); // 执行浏览器复制命令
      this.$message({
        message: '复制成功',
        type: 'success'
      });
      oInput.remove()
    },
    codeshowfunction(signUrl) {
      this.signUrl = signUrl
      this.createImage()
          this.codeShow = true;
      },
    handleClose() {
          this.codeShow = false;
      },
    wxSelectApply() {
          this.importarray = [];
          if(this.shopgetinfo.id != null){
            let params = {
              mchId:this.shopgetinfo.id
            }
            list(params).then((res) => {
              this.importarray  = res.data.data;
            });
          }
      },
    createImage(){
      this.QRcode = process.env.VUE_APP_BASE_API + '/zxing/createImage?data=' + encodeURIComponent(this.signUrl)+'&mchId='+encodeURIComponent(this.mchId)
    },
    incomingPartsDialogClick(){
      this.inComingPartsVisible = true
    },
    incomingParts(){
      this.inComingPartsVisible = false
      console.log(this.shopgetinfo.id)
      let params = {
        mchId:this.shopgetinfo.id,
        paymentPluginId:this.paymentPluginId
      }
      merchantImport(params).then(res=>{
        console.log(res)
        this.wxSelectApply();
        this.inComingPartsVisible = false
      }).catch(respond=>{
        this.inComingPartsVisible = false
      })
    },
    againIncomingParts(paymentPluginId){
      console.log(this.shopgetinfo,"0000000765765765")
      let params = {
        paymentPluginId:paymentPluginId,
        mchId:this.shopgetinfo.id
      }
      merchantImport(params).then(res=>{
        console.log(res)
        this.wxSelectApply();
      }).catch(repond=>{
        console.log(repond)
        this.wxSelectApply();
      })
    },
    incomingQuery(paymentPluginId){
      let params = {
        paymentPluginId:paymentPluginId,
        mchId:this.shopgetinfo.id
      }
      selectApply(params).then(res=>{
        this.$message('查询成功');
        this.wxSelectApply();
      }).catch(err=>{
        this.$message('查询失败');
      })
    }
  },
};
</script>
